{% extends "app/layout.html" %}

{% block title %} 注册 {% endblock %}

{% block body %}
    <!-- begin #page-loader -->
    <div id="page-loader" class="fade in"><span class="spinner"></span></div>
    <!-- end #page-loader -->

    <!-- begin #page-container -->
    <div id="page-container" class="fade">
        <!-- begin login -->
        <div class="login bg-black animated fadeInDown">
            <!-- begin brand -->
            <div class="login-header">
                <div class="brand">
                    <span class="logo"></span> 平台 注册
                </div>
                <div class="icon">
                    <i class="fa fa-sign-in"></i>
                </div>
            </div>
            <!-- end brand -->
            <div class="login-content">
                <form action="{% url 'register' %}" method="POST" class="margin-bottom-0 horizontal">
                    {% csrf_token %}
                    <div class="form-group m-b-20">
                            {{ form.phone }}{{ form.phone.errors }}
                    </div>
                    <div class="form-group m-b-20">
                        {{ form.code }}{{ form.code.errors }}
                    </div>
                    <div class="form-group m-b-20">
                        {{ form.password1 }}{{ form.password1.errors }}
                    </div>
                    <div class="form-group m-b-20">
                        {{ form.password2 }}{{ form.password2.errors }}
                    </div>

                    <div class="login-buttons">
                        <button type="submit" style="margin-bottom: 6%;" class="btn btn-success btn-block btn-lg">注册
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- end login -->
    </div>
    <!-- end page container -->
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            App.init();
            {#            var verifyPhone = $("#verify_phone");#}
            var phoneNumber = $("#phone")[0];

            function startTimer(duration, btn) {
                if (!btn[0].disabled) {
                    btn[0].disabled = true;
                    var timer = duration, minutes, seconds;

                    var runLoop = function () {
                        minutes = parseInt(timer / 60, 10);
                        seconds = parseInt(timer % 60, 10);

                        minutes = minutes < 10 ? "0" + minutes : minutes;
                        seconds = seconds < 10 ? "0" + seconds : seconds;

                        btn.text("已发送: " + minutes + ":" + seconds);
                        --timer;

                        if (timer < 0) {
                            btn[0].disabled = false;
                            btn.text("发送验证码");
                        } else {
                            setTimeout(runLoop, 1000);
                        }
                    };
                    setTimeout(runLoop, 1000);
                }
            }

            {##}
            {#            verifyPhone.on('click', function (e) {#}
            {#                $.ajax({#}
            {#                    type: "POST",#}
            {#                    url: "{% url '' %}",#}
            {#                    data: {#}
            {#                        phone: phoneNumber.value,#}
            {#                        csrfmiddlewaretoken: '{{ csrf_token }}'#}
            {#                    },#}
            {#                    dataType: "json",#}
            {#                    success: function (response) {#}
            {#                        if (response.error_code == 0) {#}
            {#                            startTimer(60, verifyPhone);#}
            {#                        } else {#}
            {#                            phoneNumber.value = "";#}
            {#                        }#}
            {#                    },#}
            {#                });#}
            {#            });#}

        })

    </script>
    {% load staticfiles %}
    {% if messages %}
        <script src="{% static 'js/sweetalert.min.js' %}"></script>
        <script>
            {% for msg in messages %}
                sweetAlert({
                    title: '{{msg.extra_args}}',
                    text: '{{ msg.message }}',
                    type: '{{ msg.level_tag }}'
                });
            {% endfor %}
        </script>
    {% endif %}
{% endblock %}
